<template>
  <div class = "numberBlock">
    <div class = "number" v-if = "toNumberBlockNum>0">
      <p v-text="toNumberBlockNum"></p>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'NumberBlock',
  data () {
    return {
    }
  },
  props : {
    toNumberBlockNum : Number,
  },

  watch : {
    toNumberBlockNum(oldValue) {
      if (32 === oldValue) {
        //防止未来的及渲染，就已经出现弹窗
        setTimeout(() => {
          alert('YOU WIN!');
        }, 100);
      }
    }
  }
  
}
</script>

<style scoped>
.numberBlock{
  display : flex; /*弹性盒子*/
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background:white;
  margin : 0.29%;
  float:left;
  width: 24%;
  height: 24%;
  border: 1px solid black;
  border-radius:5px;
  text-shadow: 2px 2px 2px grey;
  font-size: 50px;

}


</style>